<template>
	<view class="content">

		<view class="shijian">
			<view class="kssj">
				<gui-datetime @confirm="confirm1" :value="demo1Val" :isTime="false" height="500rpx" :start-year='2018'>
					<text class="gui-block gui-icons">{{demo1Val}} &#xe6d1;</text>
				</gui-datetime>
			</view>
			<view class="">~</view>
			<view class="jssj">
				<gui-datetime @confirm="confirm2" :value="demo2Val" :isTime="false" height="500rpx" :start-year='2018'>
					<text class="gui-block gui-icons">{{demo2Val}} &#xe6d1;</text>
				</gui-datetime>
			</view>
			<!-- <view>确认</view> -->
		</view>
		<view v-if="list.length > 0" style="margin-top: 15rpx; font-size: 30rpx;">
			<view class="jilu" v-for="(item, idx) in list" @click="info(item.id)">
				<view class="">
					<view class="" style="font-size: 32rpx;">{{item.business_name}}</view>
					<view class="" style="margin-top: 5rpx; font-size: 26rpx;color: #9CA6AA;">{{item.pay_time}}</view>
				</view>
				<view class="">
					<view style="color: #9BA6AA;">{{item.pay_type}}:<text
							style="color: #da1d22;">{{item.wallet_pay}}元</text></view>
					<view v-if="item.status == 1"
						style="color: #da1d22; text-align: right; font-size: 25rpx; margin-top: 5rpx;">已退款</view>
				</view>
			</view>
		</view>

		<view v-else style="text-align: center; margin-top: 150rpx;">{{noData}}</view>
	</view>

</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	import loging from "@/Grace6/components/gui-page-loading.vue";
	export default {
		data() {
			return {
				// 第 1 排序选择
				selectMenu1: ['综合', '时间升序', '时间倒序'],
				// 默认颜色
				defColor: '#2B2E3D',
				// 选中颜色
				activeColor: '#FF0036',
				// 排序索引
				orderIndex: 0,
				// 价格排序索引
				orderByIndex: 0,
				c_id: null,
				pages: 1,
				star_time: "请选择开始时间",
				end_time: "请选择结束时间",
				show_data: [],
				show_data2: [],
				count_data: [],
				isEmpty: false,

				noData: null,
				user: uni.getStorageSync("member"),
				demo1Val: "请选择开始日期",
				demo2Val: "请选择结束日期",
				list: []
			}
		},
		// onReady: function() {
		// 	this.getdata();
		// },
		onLoad(options) {
			this.c_id = options.card_id;
			const today = new Date();
			const year = today.getFullYear(); // 获取年份
			const month = today.getMonth() + 1; // 获取月份，加1
			const day = today.getDate();
			this.demo1Val = '2018-01-01'
			this.demo2Val = year + '-' + month + '-' + day
			this.record();
		},
		methods: {
			info(id){
				uni.navigateTo({
					url:'/pages/card/order_info?id='+id
				})
			},
			confirm1: function(res) {
				this.demo1Val = res[0] + '-' + res[1] + '-' + res[2];
				console.log('开始时间: ', this.demo1Val);
				this.record();
			},
			confirm2: function(res) {
				this.demo2Val = res[0] + '-' + res[1] + '-' + res[2];
				console.log('结束时间: ', this.demo2Val);
				this.record();
			},
			record() {
				let self = this
				uni.showLoading({
					title: '加载中'
				});
				
				let data = {
					"time": self.demo1Val + ',' + self.demo2Val,
					"card_id": self.c_id,
					"price": 'null'
				};
				this.$boya.NPost('/app/card_bag/get_record', data, function(res) {
					if (res.code == 200) {
						uni.hideLoading();
						self.list = res.data.data
						console.log('shuju: ', res.data);
						if(self.list.length <= 0) {
							self.zwsj = '暂无数据'
						}
					} else {
						self.$boya.msg(res.msg)
					}
				}, null, {
					showError: false
				});
			},
			dateSort() {
				// 升序排列（从早到晚）
				
				// 倒序排列（从晚到早）
				
			},
			select1: function(index, val) {
				// 获得选择项目后按照数据继续排序即可
				console.log("选择了 " + val);
				this.orderIndex = 0;
				this.orderByIndex = 0;
				if (index == 0) {
					this.show_data = this.show_data2
				} else if (index == 1) {
					this.show_data.sort((a, b) => {
						return new Date(a.pay_time).getTime() - new Date(b.pay_time).getTime();
					});
				} else {
					this.show_data.sort((a, b) => {
						return new Date(b.pay_time).getTime() - new Date(a.pay_time).getTime();
					});
				}
			},
			// 价格排序
			priceOrder: function(e) {
				console.log(e);
				// 1 2 为价格排序 0 为默认排序
				if (e != 0) {
					this.orderIndex = 2;
				}
				this.pages = 1; //初始化
				this.no_more = false;
				this.orderByIndex = e;
				this.price_type = e;
				if (e == 1) {
					this.show_data.sort((a, b) => {
						return a.wallet_pay - b.wallet_pay;
					});
				} else {
					this.show_data.sort((a, b) => {
						return b.wallet_pay - a.wallet_pay;
					});
				}
			},
			getdata(nofirst) {
				this.apiLoadSta = true;
				let self = this;
				let token = uni.getStorageSync("token");
				let time = {
					star_time: self.star_time,
					end_time: self.end_time
				}
				console.log(time, 'time');

				self.$boya.Post("/api/get_record", {
					token: token,
					pages: self.pages,
					time: time,
					price: self.price_type,
					card_id: self.c_id
				}, function(res) {
					console.log("当前运行页码" + self.pages);
					self.pages = self.pages + 1;
					if (res.data.data.length == 0) {
						self.isEmpty = true
					} else {
						self.isEmpty = false
					}
					self.count_data = res.data;
					self.show_data2 = res.data.data
					for (var i = 0; i < res.data.data.length; i++) {
						self.show_data.push(res.data.data[i]);
					}

				});
			},
		}
	}
</script>
<style scoped>
	/* 自定义吸顶元素样式 */
	.fixed-top-view {
		height: 100rpx;
	}

	.graceSelectMenuItem {
		width: 180rpx;
	}

	.price-input {
		width: 120rpx;
		padding: 10rpx 0;
		border-radius: 5rpx;
		text-align: center;
	}

	.right-area-footer {
		width: 580rpx;
		height: 100rpx;
	}

	.right-area-footer-btn {
		width: 290rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.content {
		width: 100vw;
		height: 100%;
		/* background: url('../../static/bj1.jpg') 100% 100% / 100% 100%; */
		background-color: white;
	}

	.shijian {
		height: 100rpx;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background-color: #ccc;
	}

	.jilu {
		width: 85%;
		height: 100rpx;
		padding: 12rpx 15rpx 6rpx 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		/* background-color: white; */
		border-bottom: 1px solid #c8c8c8;
	}
</style>